<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>纯CSS红绿灯</title>
    <style>
        *{
            padding:0;
            margin: 0;
        }
        body{
            background-image: linear-gradient(60deg, #29323c 0%, #485563 100%);
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }
        .container{
            display: flex;
            flex-direction: column;
            justify-content:flex-end;
            align-items: center;
            min-height: 100vh;
        }
        .footer{
            width:0.4rem;
            height: 4rem;
            box-shadow: 2px 0px 2px #fff inset;
            background-color: #080404;
        }
        .box{
            width:3.5rem;
            height:9rem;
            display: flex;
            flex-direction: column;
            justify-content:space-evenly;
            align-items:center;
            border-radius: 20px;
            box-shadow: 2px 2px 2px #fff inset;
            background-color: #080404;
        }
        .box div{
            width:2rem;
            height: 2rem;
            border-radius:50%;
            box-shadow: 2px 2px 1px white inset;
        }
        .box div:nth-of-type(1)
        {
            background-color:red;
            filter: brightness(0.2);
            animation: lightsred 6s;
          
            animation-fill-mode: forwards;
            animation-iteration-count: infinite;
        }
        @keyframes lightsred {
            0%{
                filter: brightness(2);
            }
            33.33%{
                filter: brightness(2);
            }
            33.34%{
                filter: brightness(0.2);
            }
            100%{
                filter: brightness(0.2);
            }
        }
        .box div:nth-of-type(2)
        {
            background-color:green;
            filter: brightness(0.2);
            animation: lightsgreen 6s infinite;
        }
        @keyframes lightsgreen{
            0%{
                filter: brightness(0.2);
            }
            33.33%{
            filter: brightness(0.2);
            }
            33.34%,66.66%{
            filter: brightness(2);
            }
            66.67%,100%{
            filter: brightness(0.2);
            }
        }
        .box div:nth-of-type(3)
        {
            background-color:yellow;
            filter: brightness(0.1);
            animation: lightsyellow 6s  infinite;
            animation-fill-mode: forwards;
        }
        @keyframes lightsyellow{
            0%,66.66%{
            filter: brightness(0.2);
            }
            66.67%,100%{
            filter: brightness(2);
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">
            <div></div>
            <div></div>
            <div></div>
        </div> 
        <div class="footer">

        </div>
    </div>
      
</body>
</html>
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>